<template>
    <div>
        <cvue-dialog
            :dialogVisible="wifiVisible"
            title="选择WIFI"
            :isShowFoot="true"
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody">
                <div  class="more-p">
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                       @row-click="rowClick"
                        @select="handleSelect"
                        @select-all="handleSelectAll"
                        >
                        
                         <!-- @selection-change="handleSelectionChange" -->
                        <el-table-column
                        type="selection">
                        </el-table-column>
                        <el-table-column
                        label="名称"
                        prop="name">
                        </el-table-column>
                        <el-table-column
                        prop="mac"
                        label="mac">
                        </el-table-column>
                        <el-table-column
                        prop="dormitoryName"
                        label="宿舍楼"
                        show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                    <div class="page-p">
                        <el-pagination
                            :current-page="PageNum"
                            background
                            :page-size="PageSize"
                            layout="total,prev,pager,next,jumper"
                            :total="total"
                            @current-change="getList"
                        >
                        </el-pagination>
                    </div>
      
                </div>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
export default {
    components: {
        cvueDialog
    },
    computed: {
        wifiVisible () {
            return this.$store.state.dorm.wifiVisible
        },
        schoolId () {
            return this.$store.getters.cookiesObj.schoolId
        },
        wifiSelection () {
            return this.$store.state.dorm.wifiSelection
        }
    },
    data () {
        return {
                PageNum: 1,
                PageSize: 10,
                tableData: [],
                total: 0,
                wifiSelectionCopy: []
            }
    },
    methods: {
        openDialog () {
            this.getList(1)
            this.wifiSelectionCopy = [].concat(this.wifiSelection)
        },
        confirmDialog () {
            this.$store.commit('dorm/hideWifi')
        },
        closeDialog () {
            this.$store.state.dorm.wifiSelection = this.wifiSelectionCopy
            this.$store.commit('dorm/hideWifi')
        },
        loadmore () {
            this.getList(this.PageNum + 1)
        },  
        selectRow () {
            var arr = []
            for (var i = 0; i < this.wifiSelection.length; i++) {
                for (var n = 0; n < this.tableData.length; n++) {
                    if (this.wifiSelection[i].id == this.tableData[n].id) {
                        arr.push(this.tableData[n])
                    }
                }
            }
            for (var item of arr) {
                this.$refs.multipleTable.toggleRowSelection(item)
            }
        },
        getList (num) {
            this.PageNum = num
            var parmas = {
                PageNum: this.PageNum,
                PageSize: this.PageSize,
                SchoolId: this.schoolId,
                Sorting: 'Id Desc'
            }
            this.tableData = []
            this.$store.dispatch('wifi/wifiList', parmas).then(res => {
                this.tableData = res.items
                this.total = res.totalCount

                this.$nextTick(() => {
                     this.selectRow()
                })
            })
        },
        rowClick (row, column, event) {
            this.$refs.multipleTable.toggleRowSelection(row)
            this.handleSelect(null, row)
        },
        handleSelect (selection, row) {
            var list = this.$store.state.dorm.wifiSelection
            var index = null
            for (var i = 0; i < list.length; i++) {
                if (list[i].id == row.id) {
                    index = i
                }
            }
            if (index == null) {
                list.push(row)
            } else {
                list.splice(index, 1)
            }
        },
        handleSelectAll (selection) {
            var list = this.$store.state.dorm.wifiSelection
            var index = null
            var i = 0
            var n = 0
            if (selection.length == 0) {
                for (n = 0; n < this.tableData.length; n++) {
                    index = null
                    for (i = 0; i < list.length; i++) {
                        if (list[i].id == this.tableData[n].id) {
                            index = i
                        }
                    }
                    if (index != null) {
                        list.splice(index, 1)
                    }
                }
            } else {
                for (n = 0; n < this.tableData.length; n++) {
                    index = null
                    for (i = 0; i < list.length; i++) {
                        if (list[i].id == this.tableData[n].id) {
                            index = i
                        }
                    }
                    if (index == null) {
                        list.push(this.tableData[n])
                    }
                }
            }
        }
    },
    mounted () {
        console.log('mounted....')       
    }
}
</script>
<style scoped>
.man-list{
    height: 300px;
}
.man-item{
    border:1px solid #409EFF;
    padding: 5px 10px;
    color: #409EFF;
    margin: 10px 10px 0 0;
    display: inline-block;
    cursor: pointer;
}
.man-item.active{
    background: #409EFF;
    color: #fff;

}

.page-p{
    padding: 20px;
    text-align: right;
}
</style>
